<template>
    <div class="card">
        <!-- 响应式网格布局 -->
        <el-row :gutter="10">
            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                <el-card>
                    <div>
                        <Detail title="总销售额" count="￥ 114514">
                            <template slot="charts">
                                <span>周同比 0.98% </span><i class="el-icon-caret-top" style="color:#F56C6C;margin-right:20px;"></i>
                                <span>日同比 0.98% </span><i class="el-icon-caret-bottom" style="color:#67C23A;"></i>
                            </template>
                            <template slot="footer">
                                <span>日销售额：￥ 1234</span>
                            </template>
                        </Detail>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                <el-card>
                    <div>
                        <Detail title="访问量" count="1919">
                             <template slot="charts">
                              <!-- echarts折线图 -->
                                <lineChart></lineChart>
                            </template>
                            <template slot="footer">
                                <span>日访问量： 999</span>
                            </template>
                        </Detail>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                <el-card>
                    <div>
                        <Detail title="支付笔数" count="1235">
                             <template slot="charts">
                               <!-- 柱状图 -->
                               <barChart></barChart>
                            </template>
                            <template slot="footer">
                                <span>转化率： 70%</span>
                            </template>
                        </Detail>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                <el-card>
                    <div>
                        <Detail title="活动效果" count="76%">
                             <template slot="charts">
                              <!-- 进度条 -->
                                <progressCharts></progressCharts>
                            </template>
                            <template slot="footer">
                                  <span>周同比 12% </span><i class="el-icon-caret-top" style="color:#67C23A;margin-right:20px;"></i>
                                <span>日同比 11% </span><i class="el-icon-caret-bottom" style="color:#F56C6C;"></i>
                            </template>
                        </Detail>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Detail from './Detail.vue'
import lineChart from './lineChart'
import barChart from './barChart'
import progressCharts from './progressCharts'
export default {
    name:'Card',
    components:{
        Detail,lineChart,barChart,progressCharts
    }
}
</script>

<style scoped>
    >>>.el-card__body{
        padding: 15px;
    }
</style>